import { getStores, navigating, page, updated } from "$app/stores";
import { readable, derived } from "svelte/store";
import { browser } from "$app/environment";
export type RouterItem = {
  name: string;
  path: string;
  icon?: string;
};

export type ItemState = {
  actived: boolean;
};

export type MenuItem = RouterItem & ItemState;

const _root_items: RouterItem[] = [
  {
    name: "首页",
    path: "/",
  },
  {
    name: "管理",
    path: "/dashboard",
  },
  {
    name: "文档",
    path: "/doc",
  },
  {
    name: "路线图",
    path: "/roadmap",
  },
  {
    name: "时间线",
    path: "/timeline",
  },
];

const _sub_items: RouterItem[] = [
  {
    name: "工作台",
    path: "/dashboard",
  },
];

const _datasets_items: RouterItem[] = [
  {
    name: "我的数据集",
    path: "/dataset/my",
  },
  {
    name: "数据集集市",
    path: "/dataset/market",
    icon: "database",
  },
  {
    name: "标签管理",
    path: "/dataset/tag",
    icon: "puzzle",
  },
];

const _profile_items: RouterItem[] = [
  {
    name: "个人信息",
    path: "/profile/personal",
    icon: "user",
  },
  {
    name: "设置",
    path: "/profile/setting",
    icon: "cog",
  },
  {
    name: "公司",
    path: "/profile/company",
    icon: "company",
  },
  {
    name: "团队",
    path: "/profile/team",
    icon: "user-group",
  },
];

export const root_menus$ = derived(
  page,
  ($page, set: (v: MenuItem[]) => void) => {
    set(
      _root_items.map<MenuItem>((r) => {
        return {
          ...r,
          actived: r.path !== "/" && $page.url.pathname.startsWith(r.path),
        };
      })
    );
  },
  []
);

export const sub_menus$ = derived(
  page,
  ($page, set: (v: MenuItem[]) => void) => {
    set(
      _sub_items.map<MenuItem>((r) => {
        return {
          ...r,
          actived: $page.url.pathname.startsWith(r.path),
        };
      })
    );
  },
  []
);

export const datasets_menus$ = derived(
  page,
  ($page, set: (v: MenuItem[]) => void) => {
    set(
      _datasets_items.map<MenuItem>((r) => {
        return {
          ...r,
          actived: $page.url.pathname.startsWith(r.path),
        };
      })
    );
  },
  []
);

export const profile_menus$ = derived(
  page,
  ($page, set: (v: MenuItem[]) => void) => {
    set(
      _profile_items.map<MenuItem>((r) => {
        return {
          ...r,
          actived: $page.url.pathname.startsWith(r.path),
        };
      })
    );
  },
  []
);

const get_side_items = (reqPath: string) => {
  let side_items: RouterItem[] = [];
  if (reqPath.startsWith("/dashboard") || reqPath.startsWith("/dataset")) {
    side_items = [..._sub_items, ..._datasets_items];
  } else if (reqPath.startsWith("/profile")) {
    side_items = [..._profile_items];
  }
  return side_items;
};

const get_side_menus = (reqPath: string) => {
  return get_side_items(reqPath).map<MenuItem>((r) => {
    return {
      ...r,
      actived: reqPath.startsWith(r.path),
    };
  })
}

export const sideMenus$ = derived(
  page,
  ($page, set: (v: MenuItem[]) => void) => {
    // let side_items: RouterItem[] = get_side_items($page.url.pathname)
    // console.log("side_items=>", $page.url.pathname);
    set(
      get_side_menus($page.url.pathname)
    );
  },
  []
);

export const currentMenu$ = derived(
  [sideMenus$],
  ([$sideMenus$], set: (v: MenuItem) => void) => {
    set($sideMenus$.find((m) => m.actived));
  }
);

export const getCurrentMenu = (reqPath: string) => {
  return get_side_menus(reqPath).find(m => m.actived)
};
